* {
    margin: 0;
}

body {
    background-color: #F4F4F4;
}

.section_main {
    width: 100vw;
    background-color: #52AFE9;
}

.header_on {
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: space-between;
    width: 100vw;
    height: 50px;
    background-color: #52AFE9;
}

.header_p {
    padding: 1vh;
    font-size: 2.5vh;
    color: white;
}

.l_arrowhead {
    float: left;
    width: 8vw;
    height: 4vh;
    background-repeat: no-repeat;
}

.r_arrowhead {

    float: right;
    width: 8vw;
    height: 4vh;
    background-repeat: no-repeat;
}

.share_p {
    transform: translate(-2.5vw, 1.5vh);
}

.l_p {
    transform: translate(1vw, 1vh);
}

.signal_up {
    width: 98vw;
    padding-left: 2vw;
    float: left;
    display: flex;
    justify-content: space-between;
}

.temp_mid_cebter {
    color: white;
    width: 100%;
    height: 4rem;

}

.enviroment_s {
    width: 17vw;
    height: 7vh;
    background-color: #F1AB62;
    color: white;
    border-radius: 4vw;
}

.imply {
    width: 17vw;
    height: 3vh;
    background-color: aliceblue;
    border-bottom-left-radius: 3vw;
    border-top-left-radius: 3vw;
    color: white;
}

.main_p {
    width: 100vw;
    background-repeat: no-repeat;
    transform: translate(0vw, 4vh);
}

.main_s_t {
    text-align: center;
    font-size: 17vw;
    color: white;

}

.zt {
    font-size: 5vw;
}
.tr{
    font-size: 4.5vw;
}
.describe_w {
    text-align: center;
    padding-top: 8vh;
    font-size: 4vw;
    color: white;
}

/* part_2 */
.jianyi{
    font-size: 2.5vw;
}
.sec_tommorrow {
    background-color: white;
    width: 100vw;
    height: 12vh;
    box-shadow: 0px 1px 0px 0px #CCC;
    display: flex;
    justify-content: space-between;
    transform: translate(0vw, 57vw);
}

.toody_t {
    width: 40vw;
    height: 100%;
    margin-left: 3vw;
    margin-right: 3vw;

}

.main_today_t {
    margin-top: 5%;
    width: 40vw;
    height: 40%;
    display: flex;
    justify-content: space-between;
    font-size: 4vw;

}

.main_toay_w {
    width: 40vw;
    height: 40%;
    display: flex;
    justify-content: space-between;
    font-size: 4vw;

    margin-top: 5%;
}

.tommorrow_t {
    width: 40vw;
    height: 100%;
    margin-left: 3vw;
    margin-right: 3vw;
}

.main_tommorrow_t {
    margin-top: 5%;
    width: 40vw;
    height: 40%;
    display: flex;
    justify-content: space-between;
    font-size: 4vw;
}

.main_tommorrow_w {
    width: 40vw;
    height: 40%;
    display: flex;
    justify-content: space-between;
    font-size: 4vw;
    margin-top: 5%;
}

/* part_3 */
.table_left_futher {
    width: 100vw;
    height: 16vh;
    background-color:white;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    display: -webkit-box;
    white-space: nowrap;
    margin-top: 2vh;
    transform: translate(0vw, 57vw);
    font-size: 2vw;
    box-shadow: 0px 1px 0px 0px #CCC;
}
.tx {
    list-style-type: none;
    text-align: center;
    float: left;
    width: 15vw;
    height: 70%;
    background-color: white;
    margin-top: 4.5%;
    
    font-size: 3vw;
    color: rgb(165, 159, 159);
}
.yun2{
    width: 10vw;
    height: 50%;  
    background-image: url("./Background_image/yun.png"); 
    background-repeat: no-repeat;
    transform: translate(5vw,2.5vw);
}
.tem1{
    font-size: 2.5vw;
    color: #1d1e1f;
}
/* patr_4 */
.big_box_t_w{
    width: 100vw;
    height: 55vh;
    background-color: white;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    display: -webkit-box;
    white-space: nowrap;
    transform: translate(0vw, 57vw);
    margin-top: 2vh;
    margin-bottom: 2vh;
}
.p_patter{
    text-align: center;
    width: 11vh;
    height: 95%;
    background-color:white;
    padding-top:3vh;
}
.p_patter_p{
    color: #9d9ea1;
    font-size: 1.8vw;
}
.p_patter_txt{
    color: #9d9ea1;
    font-size: 2vw;
}
.p_patter_txt_weather{
    margin-top: 2vh;
    color: #9d9ea1;
}
.p_patter_txt_weather_p{
    width: 5vh;
    height: 5vh;
    background-image: url("./Background_image/yun.png");
    background-repeat: no-repeat;
    margin-top:3.5vw;
    transform: translate(6vw);
}
.p_patter_txt_temp_max{
    color: #9d9ea1;
    margin-bottom: 12vw;
}
.p_patter_txt_temp_min{
    color: #9d9ea1;
    
}
.p_patter_txt_temp_w_c{
    color: #9d9ea1;
    margin-bottom: 2.5vh;
}
.p_patter_txt_b{
    color: #9d9ea1;
    font-size: 2vw;
}
/* part_5 */
.service_last{
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    display: -webkit-box;
    white-space: nowrap;
    width: 100vw;
    height: 40vh;
    transform: translate(0vw, 57vw);
}
.part_l_1{
    float: left;
    width: 25vw;
    height: 15vh;
    background-color: white;
}
.part_l_1{
    text-align: center;
}
.singal_part_5{
    width: 25vw;
    height: 6vw;
    margin: auto;
    margin-top: 4vw;
    background-repeat: no-repeat;

}
.limit_number{

    font-size: 2vw;
    margin-bottom: 2vw;
}
.txt_part_5{
    font-size: 1.5vw;
    color: #9d9ea1;
}
.weather_body_t{
    font-size: 3.5vw;
}
.limit_number_o{
    font-size: 3vw;
}
@media screen and (min-width: 600px) and (max-width: 1000px) {
        .nav {
          display: none;
        }
      }